<template>
    <div>
        <CropperAvatar 
        v-model:value="avatarUrl"
        :showBtn="true"
        btnText="选择头像"
        @change="handleAvatarChange"
      />

    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const avatarUrl = ref('')

const handleAvatarChange = ({ source, data, filename }: any) => {
  console.log('Avatar changed:', { source, data, filename })
  ElMessage.success('上传成功')
}

</script>

<style lang="scss" scoped>

</style>